<template>
  <div class="marketing_page">
    <navTop title="同时同频" />
    <div class="option">
      <div class="item">
        <div class="title">主机IP：</div>
        <div class="content">
          <el-input
            v-model="ports.reproduction.hostAddress"
            placeholder=""
            type="url"
          ></el-input>
        </div>
      </div>
      <div class="item">
        <div class="title">端口：</div>
        <div class="content">
          <el-input
            v-model="ports.reproduction.port"
            placeholder=""
            type="url"
          ></el-input>
        </div>
      </div>
      <div class="item">
        <div class="title">串口：</div>
        <div class="content">
          <el-select
            v-model="ports.reproduction.serialPort"
            placeholder="请选择串口"
          >
            <el-option
              v-for="(item, index) in ports.serialPort"
              :key="index"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="item">
        <el-button type="success" @click="connection">一键链接</el-button>
      </div>
      <div class="item">
        <el-button type="danger" @click="disconnect">一键断开</el-button>
      </div>
      <div class="item">
        <el-button
          type="primary"
          icon="el-icon-video-play"
          @click="action"
        ></el-button>
      </div>
    </div>
    <el-dialog
      title="机械臂配置"
      :visible.sync="maskShow"
      width="20%"
      @open="getProts"
    >
      <span slot="footer" class="dialog-footer">
        <el-button @click="maskShow = false">取消</el-button>
        <el-button type="primary">保存</el-button>
      </span>
    </el-dialog>

    <div class="continer" v-if="videoList.length > 0">
      <div class="main">
        <div
          :class="{ boxVideo: index == 0 }"
          v-for="(item, index) in videoList"
          :key="index"
        >
          <videoCustom
            ref="video"
            v-if="index == 0"
            @playRight="play"
            :index="emitIndex + index + 's'"
            :src="item"
            class="video-element mainVideo"
          />
          <div class="inster"></div>
        </div>
      </div>
      <div class="right">
        <div
          :class="{ boxVideo: index != 0 }"
          v-for="(item, index) in videoList"
          :key="index"
          v-show="index != 0"
          @click="move(index)"
        >
          <videoCustom
            ref="video"
            v-if="index != 0"
            @playRight="play"
            :index="emitIndex + index + 's'"
            :src="item"
            class="video-element rightVideo"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import navTop from "@/components/navTop.vue";
import flyAPi from "@/api/fly.js";
import { getListById } from "@/api/teaching";
import videoCustom from "@/components/videoCustom/video.vue";
import videoVR from "@/components/videoCustom/videoVR.vue";
export default {
  components: {
    navTop,
    videoCustom,
    videoVR,
  },
  data() {
    return {
      taskId: "",
      videoList: [],
      maskShow: false,
      isconnection: false,
      ports: {
        reproduction: {},
      },
    };
  },
  computed: {
    emitIndex() {
      return Math.floor(Math.random() * 100).toString();
    },
  },
  created() {
    this.$nextTick(() => {
      this.taskId = this.$route.query.id;
      this.getDelits();
      this.getProts();
    });
  },
  methods: {
    getProts() {
      flyAPi.scanSerialPort().then((res) => {
        if (res.data.code == 200) {
          this.ports = res.data.data;
        }
      });
    },
    connection() {
      flyAPi.connection(this.ports.reproduction).then((res) => {
        if (res.data.code == 200) {
          this.$modal.msgSuccess("连接成功");
        }
      });
    },
    disconnect() {
      flyAPi.disconnect().then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.$modal.msgSuccess("断开成功");
        }
      });
    },
    action() {
      flyAPi.startReproduction(this.taskId).then((res) => {
        if (res.data.code == 200) {
          this.$modal.msgSuccess("开始复现");
          this.play();
        }
      });
    },
    getDelits() {
      getListById(this.taskId).then((res) => {
        this.videoList = res.data.networkClip;
      });
    },

    move(index) {
      let videoElements = document.querySelectorAll(".video-element");
      let mainVideo = document.querySelector(".video-element:first-child");
      let inster = document.querySelector(".inster");
      if (!mainVideo || !videoElements[index]) {
        return;
      }
      console.log("mainVideo", mainVideo);
      console.log("videoElements", videoElements[index]);
      videoElements[index].after(mainVideo);
      inster.before(videoElements[index]);
    },
    play() {
      if (this.$refs.video && Array.isArray(this.$refs.video)) {
        this.$refs.video.forEach((video) => {
          if (video && typeof video.playVideo === "function") {
            video.playVideo();
          }
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.marketing_page {
  padding-left: 36px;
  display: flex;
  flex-flow: column;
  .option {
    padding: 10px;
    display: flex;
    flex-flow: row;
    justify-content: flex-start;
  }
  .item {
    height: 40px;
    display: flex;
    flex-flow: row;
    justify-content: flex-start;
    align-items: center;
    margin: 0 5px;
    .title {
      white-space: nowrap;
    }
    .content {
      width: 320px;
      .el-input,
      .el-select {
        &::v-deep .el-input__inner {
          padding: 0 15px;
          width: 100%;
          height: 40px;
        }
      }
    }
  }
  .continer {
    height: 100%;
    display: flex;
    flex-flow: row;
    justify-content: flex-start;
    .main {
      margin: 0 10px;
      .boxVideo {
        width: 1500px;
        height: 980px;
      }
    }
    .right {
      padding: 0 10px;
      box-sizing: border-box;
      max-height: 78vh;
      overflow-y: auto;
      .boxVideo {
        width: 600px;
        height: 280px;
      }
      &::-webkit-scrollbar-thumb {
        background-color: #6fe0ff;
        border-radius: 12px;
      }
    }
  }
  .boxVideo {
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
  }
}
</style>
